import "./Menu.less";
import { gameManager } from "../core/GameManager";
import { FunctionalComponent, defineComponent, onMounted, ref } from "vue";

export const Menu = defineComponent(() => {
  const login = ref(false);
  const menu12 = ref(false);
  const doorCreate = ref(false);
  const openDoor = ref(false);

  onMounted(() => {
    gameManager.on("doorCreate", () => {
      doorCreate.value = true
    }, true, true);
    gameManager.on("openDoor", () => {
      openDoor.value = true
      menu12.value = false
    }, true, true);
    setTimeout(() => {
      login.value = true
      menu12.value = true
    }, 500);
  })
window.addEventListener('message', (e)=>{
  try {
    const data = JSON.parse(e.data)
    if(data.type === 'login'){
      gameManager.emit("button-start-click");
      gameManager.emit("start")
      login.value = false
    }
    if(data.type === 'enterDoor'){
      document.querySelector('canvas')?.dispatchEvent(new PointerEvent('pointerdown')) 
    }
  } catch (error) {
  }
})
  return () => (
    <div  class="menu-container">
      <div class="menu-12" style={{ opacity: menu12.value ? "0.9" : "0" }}></div>
      <div  class="menu-login" style={{ opacity: login.value ? "1" : "0",display:'none' }}>
        <div class="background"></div>
        <div class="menu-description">
          <div class="description">
            <p>免责声明：</p>
            <p>本网站是一个纯粹的技术示例，旨在展示和分享我们的技术能力。网站的设计和内容受到《原神》的启发，并尽可能地复制了《原神》的登录界面。我们对此表示敬意，并强调这个项目不是官方的《原神》产品，也没有与《原神》或其母公司miHoYo有任何关联。</p>
            <p>我们没有，也无意从这个项目中获得任何经济利益。这个网站的所有内容仅供学习和研究目的，以便让更多的人了解和熟悉webgl开发技术。</p>
            <p>如果miHoYo或任何有关方面认为这个项目侵犯了他们的权益，请联系我们，我们会立即采取行动。</p>
          </div>
        </div>
        <button class="ClickMe" onClick={login.value ? () => {
          gameManager.emit("button-start-click");
          gameManager.emit("start")
          login.value = false
        } : () => { }}></button>
        <button class="ClickMe" style={{
          bottom: "16%",
          backgroundImage: `url("/Genshin/jump.png")`
        }} onClick={login.value ? () => {
          window.open('https://www.bilibili.com/video/BV1E8411v7xy');
        } : () => { }}></button>
      </div>
      {doorCreate.value && (
        <div class="menu-doorCreate-content" style={{ opacity: openDoor.value ? "0" : "1" }}>
          <div class="menu-doorCreate" >
            <div class="entry" />
          </div>
        </div>
      )}

    </div>
  )
})